<script>

import axios from 'axios';
import * as echarts from 'echarts';


    export default{
        data(){
            return{
                chart:null,
                url:"http://39.106.84.74:8060/predict",
            }
        },
        mounted(){
            console.log("mount")
            if (echarts.getInstanceByDom(document.getElementById("predict")) == undefined){
                this.chart = echarts.init(document.getElementById("predict"));
            }
            this.getChart(this.url,{"city":this.$route.params.city},this.chart)
        },
        methods:{
            getChart(url,params,chart){
                axios.get(url,{params:params})
                .then( (response) => {
                    chart.setOption(response.data)
                })
            }
        }
    }
</script>

<template>
    <h1>{{ this.$route.params.city }}</h1>
    <div class="container3">
        <keep-alive>
            <div id="predict"></div>
        </keep-alive>
    </div>
</template>

<style>
    .container3{
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 90%;
        justify-content: center;
        align-items: center;
    }
    #predict{
        width: 80%;
        height: 80%;
    }
</style>